<template>
    <div>
        <!-- 组件页面代码 -->
        <h1>{{ msg }}</h1>
        <div>            
            <input v-model="msg"/>
        </div>
        <div>
            <span v-html="htmlvalue"></span>
        </div>
        <div>显示count：{{ count }}</div>
        <div>
            <button @click="increment()">更新count</button>
        </div>
        <div>
            <ul>
                <li v-for="(item,index) in items" :key="index">
                    {{ item.username }}
                </li>
            </ul>
        </div>
        <div>
            <div v-if="orderlist.length==0">
                当前没有商品
            </div>
            <div v-else>
                <ul>
                    <li v-for="(item,index) in orderlist" :key="index">
                        {{ item.pro_name }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
// vue功能代码
export default {
  name: 'Menu',
  data(){
    return {
        msg:"我的第一个vue练习",
        htmlvalue:"<input type='text' value='输出html'/>",
        count:0,
        items:[{username:"李明"},{username:"张晨"}],
        orderlist:[{id:1,pro_name:"冰红茶"},{id:2,pro_name:"茉莉蜜茶"}]
    }
  },
  mounted() {
    
  },
  methods:{
    increment() {
      this.count++
    }
  }
}
</script>
<style scoped>
/* 写页面css样式 */
</style>